<template>
  <div>
    <headerMiddle title="编辑资料"></headerMiddle>
    <div class="avatar">
      <img class="avatar-img" :src="profile.head_img" alt />
      <!-- after-read 在选择完图片之后会被触发 -->
      <van-uploader :after-read="afterRead" class="fileUploader" />
    </div>
    <cellBar label="昵称" :desc="profile.nickname" @skip="isShowNickname= true" />
    <cellBar label="密码" desc="******" @skip="isShowPwd= true" />
    <cellBar label="性别" :desc="profile.gender" @skip="isShowGender=true" />

    <van-dialog
      v-model="isShowNickname"
      title="编辑昵称"
      show-cancel-button
      @confirm="editProfile({nickname:newNickname})"
    >
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <van-dialog
      v-model="isShowPwd"
      title="修改密码"
      show-cancel-button
      @confirm="editProfile({password:newPwd})"
    >
      <van-field type="password" v-model="newPwd" placeholder="请输入密码" />
    </van-dialog>

    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="selectGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
import cellBar from "../components/cellBar";

export default {
  components: {
    headerMiddle,
    cellBar
  },
  data() {
    return {
      isShowNickname: false,
      isShowPwd: false,
      isShowGender: false,
      genderList: [
        {
          name: "男"
        },
        {
          name: "女"
        }
      ],
      newNickname: "",
      newPwd: "",
      profile: {}
    };
  },
  methods: {
    loadPage() {
      // 发送 ajax
      this.$axios({
        url: "/user/" + localStorage.getItem("user_id"),
        method: "get",
      }).then(res => {
        this.profile = res.data.data;

        if (!this.profile.head_img) {
          // 如果数据库没有头像,强行设置一个默认的
          this.profile.head_img = "/static/img/xixi.png";
        } else {
          // 如果有头像数据,我们还要拼接数据库基准路径才能获取到头像真正地址
          this.profile.head_img =
            this.$axios.defaults.baseURL + this.profile.head_img;
        }

        this.profile.gender = this.profile.gender == 0 ? "女" : "男";
      });
    },
    editProfile(newData) {
      // 发送 ajax 请求
      this.$axios({
        url: "/user_update/" + localStorage.getItem("user_id"),
        method: "post",
        data: newData
      }).then(res => {
        console.log("修改成功");
        this.loadPage();
      });
    },
    selectGender(item) {
      // 这个点击之后的回调,可以接受一个参数, item.name 就能获取用户选中的那个选项
      console.log("你选中了" + item.name);
      // 调用已经封装好的 editProfile 方法, 修改用户信息
      this.editProfile({
        gender: item.name == "男" ? 1 : 0
      });
      this.isShowGender = false;
    },
    afterRead(fileItem) {
      // 使用一个对象,FormData 将数据转换为二进制形式
      const data = new FormData();
      // 将拿到的图片放进这个二进制对象的 file 字段里面
      data.append("file", fileItem.file);
      // 这个 data 对象就是一个可以直接上传的数据

      this.$axios({
        url:'/upload',
        method:'post',
        data,
      }).then(res => {
        // 文件仅仅上传没有返回 url 也没有修改用户信息
        // 要调用editProfile 方法 修改 head_img 图片地址在 res.data.data.url
        console.log(res.data);
        this.editProfile({
          head_img: res.data.data.url
        });
      });
    }
  },
  mounted() {
    this.loadPage();
  }
};
</script>

<style lang="less" scoped>
.avatar {
  padding: 8.333vw;
  text-align: center;
  position: relative;
}
.fileUploader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.avatar-img {
  width: 19.444vw;
  border-radius: 50%;
}
</style>